<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">
    <title>题目列表</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/minimal/minimal.css}" rel="stylesheet">
    <link th:href="@{/js/iCheck/skins/square/square.css}" rel="stylesheet">
    <link href="/js/iCheck/skins/square/red.css" rel="stylesheet">
    <link href="/js/iCheck/skins/square/blue.css" rel="stylesheet">
    <!--dashboard calendar-->
    <link href="/css/clndr.css" rel="stylesheet">
    <!--common-->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">
</head>

<body class="sticky-header">

<!--左侧开始-->
<div th:replace="~{admin/commons/common :: commonleft}"></div>
<!--左侧结束-->

<!--主页面开始-->
<div class="main-content" >
    <!--头部开始-->
    <div th:replace="~{admin/commons/common :: commonheader}"></div>
    <!--头部结束-->



    <!--当前位置介绍开始-->
    <div class="page-heading">
        <h3>
            题目列表
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="#">题库管理</a>
            </li>
            <li class="active"> 题目列表 </li>
        </ul>
    </div>
    <!-- 当前位置介绍结束-->

    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">
                    <header class="panel-heading">
                        <!--form表单开始-->
                        <form class="form-horizontal adminex-form" method="get">
                            <div class="form-inline">
                                <input type="text" class="form-control input-sm" th:value="${qNameValue}" name="name" placeholder="输入关键字查询" style="font-weight:lighter">

                                <select class="btn  btn-default btn-sm" id="qType" name="qType">
                                    <option value="0" th:selected="${qTypeValue} == 0">题目类型</option>
                                    <option value="1" th:selected="${qTypeValue} == 1">单选题</option>
                                    <option value="2" th:selected="${qTypeValue} == 2">多选题</option>
                                </select>

                                <select class="btn  btn-default btn-sm" id="qPool" name="qPool">
                                    <option value="-1" th:selected="${qPoolValue} == 0">请选择类型</option>
                                    <option
                                            th:each="type:${typeList}"
                                            th:value="${type.getQPool()}"
                                            th:text="${type.getQType()}"
                                            th:selected="${qPoolValue} == ${type.getQPool()}">
                                    </option>
                                </select>

                                <input type="submit" class="btn  btn-success btn-sm" value="查询">

                                <button class="btn btn-danger btn-sm" onclick="DelSelect()" type="button" >批量删除</button>

                                </div>
                        </form>

                        <!--form表单结束-->
                    </header>

                    <div class="panel-body">
                        <div class="table-responsive" style="height: 55em">
                            <div class="space15"></div>
                            <table class="display table table-hover" id="dynamic-table">
                                <thead>
                                <tr>
                                    <th><input type="checkbox" name="id[]" id="check" onclick="checkAll(this,'id[]');"/> <a type="button" onclick="$('#check').click()" href="javascript:void(0);" >全选</a></th>
                                    <th>id</th>
                                    <th>题型</th>
                                    <th class="col-md-5">题干</th>
                                    <th>分数</th>
                                    <th>难度</th>
                                    <th>分类</th>
                                    <th>解决数</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="question : ${questionList}">
                                    <td class="center">  <input type="checkbox" name="id[]"  th:value="${question.id}" id="id[]" /></td>
                                    <td th:text="${question.id}"></td>
                                    <td  th:if="${question.questionType}==1" th:text="单选题"></td>
                                    <td  th:if="${question.questionType}==2" th:text="多选题"></td>
<!--                                    <td  th:if="${question.questionType}==3" th:text="判断题"></td>-->
<!--                                    <td  th:if="${question.questionType}==4" th:text="填空题"></td>-->
<!--                                    <td  th:if="${question.questionType}==5" th:text="简答题"></td>-->
                                    <td th:text="${question.content}" class="col-md-5"></td>
                                    <td th:text="${question.score}"></td>
                                    <td>
                                        <span th:if="${question.difficult}==1" th:text="简单" class="label label-success">简单</span>
                                        <span th:if="${question.difficult}==2" th:text="中等" class="label label-primary">中等</span>
                                        <span th:if="${question.difficult}==3" th:text="困难" class="label label-danger">困难</span>
                                    </td>
                                    <td>
                                        <span th:text="${question.qType}" th:value="${question.questionPool}" class="label label-info"></span>
                                    </td>

                                    <td th:text="${question.solutioned}"></td>
                                    <td th:text="${question.createUser}"></td>
                                    <td th:text="${#temporals.format(question.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td >
                                        <button th:if="${question.status}==1" type="button" th:value="${question.id}" class="btn btn-sm btn-success"  name="statusButton"  id="statusButton" ><i class="fa "></i>启用</button>
                                        <button th:if="${question.status}==0" type="button" th:value="${question.id}" class="btn btn-sm btn-danger"  name="statusButton"  id="statusButton" ><i class="fa "></i>禁用</button>
                                    </td>
                                    <td>
                                        <a  th:href="@{/admin/updateQuestionPage/{id}(id=${question.id})}"
                                            th:value="${question.id}">修改
                                        </a>
                                        <a  th:href="@{/admin/deleteQuestion/{id}(id=${question.id})}"
                                            onclick="return del()" th:value="${question.id}" >删除
                                        </a>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                            <!--分页-->
                            <div th:fragment="page"><!--定义用于被显示列表页包含-->
                                <head>
                                    <style>
                                        .page-item {
                                            padding: 1px 5px;
                                            border: 1px solid #afafaf;
                                            margin-left: 3px
                                        }

                                        .page-item.active {
                                            color: red;
                                            border: 1px solid red;
                                        }
                                    </style>
                                </head>
                                <div style="float: left" th:if="${page.pages>0}">
                                    当前第<span th:text="${page.current}"></span>页,共<span
                                        th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
                                </div>
                                <div style="float: right" th:if="${page.pages>0}">
                                    <a th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a>
                                    <a th:href="@{${jumpUrl}+${page.current-1}+${qType}+${qTypeValue}+${qName}+${qNameValue}+${qPool}+${qPoolValue}}" th:text="上一页" th:class="page-item"
                                       th:if="${page.current>1}"></a>
                                    <a th:href="@{${jumpUrl}+${i}+${qType}+${qTypeValue}+${qName}+${qNameValue}+${qPool}+${qPoolValue}}"
                                       th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
                                       th:class="${page.current == i}? 'page-item active' :'page-item' "></a>
                                    <a th:href="@{${jumpUrl}+${page.current+1}+${qType}+${qTypeValue}+${qName}+${qNameValue}+${qPool}+${qPoolValue}}" th:text="下一页" th:class="page-item"
                                       th:if="${page.current<page.pages}"></a>
                                    <a
                                        th:href="@{${jumpUrl}+${page.pages}+${qType}+${qTypeValue}+${qName}+${qNameValue}+${qPool}+${qPoolValue}}" th:text="尾页" th:class="page-item"
                                        th:if="${page.current<page.pages}"></a>
                                </div>
                            </div>
                            <!--分页结束-->

                        </div>

                    </div>
                </section>

            </div>
        </div>
    </div>
    <!--body wrapper end-->

    <!--footer section start-->
    <footer>
        2022 &copy;<a href="https://www.pdsu.edu.cn/" target="_blank">平顶山学院软件应用双创实验室提供技术支持</a>
    </footer>
    <!--footer section end-->


</div>
<!--主页面结束-->

<div th:replace="~{admin/commons/common :: commonupdatePwd}"></div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="/js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/data-tables/DT_bootstrap.js"></script>

<!--表单校验-->
<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
<script src="/js/validation-init.js"></script>

<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>
<!--script for editable table-->
<script src="/js/editable-table.js"></script>


<script type="text/javascript">
function checkAll(obj,cName){
    var checkboxs = document.getElementsByName(cName);
    for(var i = 0; i< checkboxs.length; i+=1){
        checkboxs[i].checked = obj.checked;
    }
}


    // 单个删除
    function del() {
        if (confirm("您确定要删除吗？")) {
            return true;
        } else {
            return false;
        }
    }

    // 批量删除
    function DelSelect() {
        var Checkbox = false;
        $("input[name='id[]']").each(function() {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) {
                return false;
            } else {
                var ids="";
                $("input[name='id[]']").each(function() {
                    if (this.checked == true &&this.value!="on") {
                        ids += this.value + ",";

                    }
                });
                window.location.replace("/admin/deleteQuestionsCounts?ids="+ids);
            }
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }


    $("#updateModal").modal("hide");
    function Values(ID) {
        $("#id").val(ID);
    }


    //获取按钮数组
    var len = document.getElementsByName("statusButton").length;
    //通过循环给每个按钮添加点击事件
    var temp = document.getElementsByName("statusButton")
    // alert(len)

    for(var i = 0; i < document.getElementsByName("statusButton").length ; i++){
        document.getElementsByName("statusButton")[i].onclick = (function() {
            var id = this.value
            var statusValue = this.innerText=='启用'?1:0
            var _this = $(this)
            $.ajax({
                //请求路径
                url: "/admin/questionStatusChange",
                //请求类型
                type: "POST",
                //data表示发送的数据
                data: JSON.stringify({
                    qStatus: statusValue,
                    id: id
                }), //定义发送请求的数据格式为JSON字符串
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                //成功响应的结果
                success: function (data) {
                    if(data.status==1){
                        _this.removeClass('btn-danger').addClass('btn-success').html('启用')
                    }else if(data.status==0) {
                        _this.removeClass('btn-success').addClass('btn-danger').html('禁用')
                    }
                    else {
                        alert('修改失败')
                    }
                },

            })
        });
    }

    function values(id,userName,password,uId,realName,sex,profession,perms){
        $('#id').val(id)
        $('#userNameUpdate').val(userName)
        $('#passwordUpdate').val(password)
        $('#uIdUpdate').val(uId)
        $('#realNameUpdate').val(realName)
        $("input[name='sexUpdate'][value='" + sex + "']").prop("checked", true);
        $('#professionUpdate').val(profession)
        $("input[name='permsUpdate'][value='" + perms + "']").prop("checked", true);
    }


// 修改密码
$("#pwd_btn").click(function() {
    $("#pwd_btn").blur();
    if (confirm("是否确定修改?")){
        var submit = true;
        var oldPwd = $("#oldPwd").val(); //原始密码
        var newPwd = $("#newPwd").val(); //新密码1
        var newPwd2 = $("#newPwd2").val(); //新密码2

        if ((oldPwd && newPwd && newPwd2) == '') {
            $("#tip").html("密码不能为空");
            $("#tip").show();
            submit = false;
        }
        if(submit){
            $.ajax({
                type:"post",
                url:"/admin/updatePwd",
                data: JSON.stringify({
                    oldPwd : oldPwd,
                    newPwd : newPwd,
                    newPwd2 : newPwd2
                }),
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                success:function (data){
                    if(data.code == 200 ){
                        $("#tip").hide();
                        $("#pwd_form").submit();
                        alert("修改成功，请重新登录!")
                        window.location.href = "/user/logout"
                    }else if(data.code != 200){
                        $("#tip").html(data.info);
                        $("#tip").show();
                    }
                }
            });
        }
    }
});


    jQuery(document).ready(function() {
        EditableTable.init();
    });
    document.getElementById("question-list").className="active";
    document.getElementById("menu4").className="menu-list nav-active";
</script>

</body>


</html>
<script>
    import Form_advanced_components from "./form_advanced_components.html";
    import Index from "../user/index.html";
    export default {
        components: {Index, Form_advanced_components}
    }

</script>